<template>
	<view>
		<view class="bg-container">
			<image src="../../static/my/img-bg@2x.png" mode="widthFix" class="my-bgi"></image>
			<view class="user-info">
				<image v-if="!userInfo.avatar" src="../../static/my/img-头像@2x.png" class="avatar" mode="widthFix"></image>
				<image v-else :src="userInfo.avatar" class="avatar" mode="widthFix"></image>
				<view class="name">{{userInfo.name}}</view>
				<view class="code">司机编号：{{userInfo.number}}</view>
				<view class="code">手机号：{{userInfo.phone}}</view>
			</view>
			<view class="task">
				<view class="task-title">- 本月任务 -</view>
				<view class="task-content">
					<view class="task-item">
						<span>{{taskInfo.taskAmounts}}</span>
						<p>任务总量</p>
					</view>
					<view class="task-item">
						<span>{{taskInfo.completedAmounts}}</span>
						<p>完成任务量</p>
					</view>
					<view class="task-item">
						<span>{{taskInfo.transportMileage}}</span>
						<p>运输里程(km)</p>
					</view>
				</view>
			</view>
			<view class="check-data">
				<van-cell-group :border="false">
				  <van-cell size="large" title="车辆信息" is-link />
				  <van-cell size="large" title="任务数据" is-link />
				  <van-cell size="large" title="系统设置" is-link />
				</van-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserInfo, getTaskInfo } from '@/api/user.js'
	export default {
		data() {
			return {
				userInfo:{},
				taskInfo:{}
			};
		},
		onLoad(){
			this.getUserInfo()
			this.getTaskInfo()
		},
		methods:{
			async getUserInfo(){
				const res = await getUserInfo(this.$store.getters.token)
				this.userInfo = res.data
			},
			async getTaskInfo(){
				const date = new Date()
				const month = '0' + (date.getMonth() + 1)
				const year = '' + date.getFullYear()
				const res = await getTaskInfo(month,year)
				this.taskInfo = res.data
			}
		}
	}
</script>

<style lang="scss">
.bg-container{
	position: relative;
	width: 750rpx;
	height: 1450rpx;
	background-color: #F4F4F4;
	.my-bgi{
		position: absolute;
		width: 100%;
		height: 100%;
		transform: translateY(-5rpx);
	}
	.user-info{
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		
		.avatar{
			width: 134.52rpx !important;
			height: 132.16rpx !important;
		}
		.name{
			font-size: 36rpx;
			font-weight: 600;
			line-height: 50rpx;
			margin: 10rpx 0;
		}
		.code{
			font-weight: 400;
			font-size: 28rpx;
			width: 500rpx;
			text-align: center;
			margin: 10rpx 0;
		}
		
	}
	.task{
		position: absolute;
		top: 33%;
		left: 50%;
		transform: translateX(-50%);
		width: 670rpx;
		height: 268rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx;
		.task-title{
			text-align: center;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #818181;
			letter-spacing: 0.32rpx;
			margin-top: 10rpx;
			margin-bottom: 50rpx;
		}
		.task-content{
			display: flex;
			justify-content: space-around;
			.task-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				span{
					font-family: PingFangSC-SNaNrpxibold;
					font-weight: 600;
					font-size: 36rpx;
					color: #2A2929;
					letter-spacing: 0.42rpx;
					margin-bottom: 40rpx;
				}
				p{
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 24rpx;
					color: #2A2929;
					letter-spacing: 0.28rpx;
				}
			}
		}
	}
	.check-data{
		position: absolute;
		width: 690rpx;
		height: 360rpx;
		background-color: #fff;
		top: 57%;
		left: 50%;
		border-radius: 16rpx;
		transform: translateX(-50%);
		overflow: hidden;
		::v-deep .van-cell--large{
			height: 121rpx;
		}
	}
}
</style>
